<template>
    <div class="Bread">
  <Bread></Bread>
  </div>
    <!-- 数据列表 -->
    <el-card shadow="always">
        <div class="data-list">
            <div class="left">
                <el-icon size="16">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button type="primary" @click="addlist">添加</el-button>
            </div>
        </div>
    </el-card>
    <!-- 用户表格 -->
    <el-table :data="tableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="类型名称" width="400" />
        <el-table-column prop="attributeCount" label="属性数量" />
        <el-table-column prop="paramCount" label="参数数量" />
        <el-table-column label="设置" width="200">
            <template #default="scope">
                <el-button size="small" @click="ckproductAttrList(scope.row)">属性列表</el-button>
                <el-button size="small" @click="csckproductAttrList(scope.row)">参数列表</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
            <template #default="scope">
                <el-button size="small" @click="onEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteattr(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination v-model:current-page="tableData.pageNum" v-model="tableData.pageSize" :page-sizes="[1, 5, 10, 20]"
        background layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    <!-- //添加弹出框 -->
    <Edit :visible="visible" :form="formt" @cancel="onCloseDialog" @confirm="onConfirmDialog"></Edit>
</template>

<script setup lang='ts'>
import { da } from "element-plus/es/locale";
import { ref, reactive } from "vue"
import type { Ref } from "vue"
import * as api from '../../request/api'
import type { productAttrParams, productAttrItem, productAttrRes } from '../../request/PmsProductAttributeCategoryController/index'
import Edit from "./productAttrEdit.vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter} from 'vue-router'
import Bread from "@/components/Bread.vue";
let router = useRouter()

//列表数据
let tableData = reactive({
    list: <any>[],
    pageNum: 1,
    pageSize: 5,
    total: 0,
    totalPage: 0
})
//类型添加
let visible = ref(false)
// true添加 | 编辑
let add = false
//类型

const formt = ref({}) as Ref<productAttrItem>


//数据请求
let gettableData = async () => {
    let datatt = await api.productAttr.getproductAttrList({
        pageNum: tableData.pageNum,
        pageSize: tableData.pageSize,
    })
    tableData.list = datatt.list
    tableData.pageNum = datatt.pageNum
    tableData.pageSize = datatt.pageSize
    tableData.total = datatt.total
    tableData.totalPage = datatt.totalPage
    // console.log(datatt);

}
gettableData()


// 每页条数发生变化时的处理
let handleSizeChange = (val: number) => {
    // console.log(val);
    tableData.pageSize = val;
    gettableData()
}

// 改变当前页数
let handleCurrentChange = (val: number)  => {
    // console.log(val);
    tableData.pageNum = val;
    gettableData()

}

//点击打开弹出框
let addlist = () => {
    let newUser = {
        name: '',
        attributeCount: 1,
        id: 0,
        paramCount: 0
    } as productAttrItem
    formt.value = newUser
    add = true
    visible.value = true
}
//编辑
let onEdit = (row: productAttrItem) => {
    // console.log(row);

    add = false;
    formt.value = row
    visible.value = true
}

// 子级 emit组件传过来的事件
const onCloseDialog = () => {
    visible.value = false
}

// 确认了输入框的内容之后
const onConfirmDialog = (row: productAttrItem) => {
    ElMessageBox.confirm(
        '此操作将添加当前用户信息，是否继续？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求
            // await api.admin.getRegister(row)
            if (add) {
                let a = {
                    name: row.name
                    
                }
                // console.log(row.name);
                // a=row.name
                await api.productAttr.addproductAttr(a) //新增
            } else {
                let a = {
                    name: row.name,
                    id:row.id
                }
                await api.productAttr.upproductAttr(a) // 编辑
            }
            // console.log('点击成功');
            // console.log(row.name);
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            router.go(0)
            visible.value = false
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您已取消',
            });
        })
}

//删除按钮
 let deleteattr= async (row:productAttrItem)=>{
    // console.log(row.id);
    ElMessageBox.confirm(
        '此操作将添加当前用户信息，是否继续？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // console.log('确认删除');
            // console.log(row.id);
            await api.productAttr.deleteproductAttr(row.id)

            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            router.go(0)
            visible.value = false
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您已取消',
            });
        })
    // await api.productAttr.deleteproductAttr(row.id)
 }

 //属性列表按钮和参数列表按钮
let ckproductAttrList = (row: productAttrItem) => {
    // console.log(row);
    router.push({
        path: '/pms/productAttrList',
        query:{
            cid:row.id,
            name:row.name,
            type:0
        }
    })
}
// 参数列表按钮
let csckproductAttrList=(row:productAttrItem)=>{
    router.push({
        path: '/pms/productAttrList',
        query:{
            cid:row.id,
            name:row.name,
            type:1
        }
    })
}

</script>


<style lang = "scss" scoped>
.data-list {
    display: flex;
    justify-content: space-between;
}

.el-table {
    margin-top: 30px;

    :deep .cell {
        text-align: center;
    }

}

.el-pagination {
    position: absolute;
    right: 30px;
}
.Bread {
  position: sticky;
  top: -100px;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #eee;
  // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding-left: 20px;
  box-sizing: border-box;
}
</style>